<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>统战成员学习平台</title>
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<link rel="stylesheet" type="text/css" href="../../css/discovery.css" />
</head>

<body class="white">
	<div id='app' style="display:none" v-show="true">
		<!-- <p class="moment_year ui_border_b">2017</p> -->
		<transition-group name="list" tag="ul" class="user_moments_list">
			<li @click="openWin('../discovery/moment_detail_win', {studyMomentId: item.studyMomentId, delete: true})" v-for="(item, index) of items" :key="item" tapmode="tap" :class="{'no_image': item.imgList.length === 0}">
				<div class="time" v-html="formatDate(item.createDate)"></div>
				<div v-if="item.imgList.length === 1" class="imgs one">
					<div :style="'background: #f3f3f3 url('+ imageBasePath + item.imgList[0].imgUrl +') no-repeat center'"></div>
				</div>
				<div v-if="item.imgList.length > 1 && item.imgList.length < 4" class="imgs two">
					<div :style="'background: #f3f3f3 url('+ imageBasePath + item.imgList[0].imgUrl +') no-repeat center'"></div>
					<div :style="'background: #f3f3f3 url('+ imageBasePath + item.imgList[1].imgUrl +') no-repeat center'"></div>
				</div>
				<div v-if="item.imgList.length > 3" class="imgs four">
					<div :style="'background: #f3f3f3 url('+ imageBasePath + item.imgList[0].imgUrl +') no-repeat center'"></div>
					<div :style="'background: #f3f3f3 url('+ imageBasePath + item.imgList[1].imgUrl +') no-repeat center'"></div>
					<div :style="'background: #f3f3f3 url('+ imageBasePath + item.imgList[2].imgUrl +') no-repeat center'"></div>
					<div :style="'background: #f3f3f3 url('+ imageBasePath + item.imgList[3].imgUrl +') no-repeat center'"></div>
				</div>
				<i v-if="item.imgList.length > 1" class="img_count">共{{item.imgList.length}}张</i>
				<p class="content" v-html="item.content"></p>
			</li>
			<li v-if="loaded" class="no_more" key="-1">已经到底了</li>
		</transition-group>
		<transition name="fade">
			<spinner v-if="loading"></spinner>
		</transition>
	</div>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/vue.min.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/layer_mobile/layer.js"></script>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				imageBasePath: imageBasePath,
				dates: [],
				items: [],
				loading: false,
				loaded: false,
				pageNum: 1,
				pageSize: 10,
			},
			mounted: function() {
				var $this = this;
				apiready = function() {
					api.parseTapmode();
					$this.getList();

					onScrollToBottom(function () {
						if ($this.loaded) return;
						$this.getList()
					})
					api.addEventListener({
						name: 'del_moment_from_my_event'
					}, function(ret, err) {
						$this.delMoment(ret.value.studyMomentId)
					});
				}
			},
			methods: {
				getList: function() {
					var $this = this;
					if ($this.loading) return;
					$this.loading = true;
					var userInfo = $api.getStorage(_.USERINFO);
					post('/client/studyMoment/userSMList', {
						uId: userInfo.usrId,
						pageNum: $this.pageNum,
						pageSize: $this.pageSize,
					}, function(ret) {
						$this.loading = false;
						if (ret.isSuccess) {
							ret.data.list.forEach(function(item) {
								var now = new Date(item.createDate.replace(/\-/g, '/'));
								if ($this.dates.indexOf(now.toISOString().substr(0, 10)) > -1) {
									item.createDate = 0
								} else {
									$this.dates.push(now.toISOString().substr(0, 10))
								}
								$this.items.push(item)
							});
							ret.data.isLastPage ? $this.loaded = true : $this.pageNum++;
							parseTapmode();
						} else {
							msgUtil.toast({
								msg: ret.message
							});
						}
					})
				},
				formatDate: function(time) {
					if (!time) return '';
					var now = new Date();

					var dateTime = new Date(time.replace(/\-/g, '/'));
					var date = new Date(time.replace(/\-/g, '/').split(' ')[0]);
					var today = new Date((new Date).toJSON().split('T')[0].replace(/\-/g, '/'));
					var dayTime = today - date;

					if (dayTime < 1000 * 60 * 60 * 24) {
						return '今天'
					}
					if (dayTime < 1000 * 60 * 60 * 24 * 2) {
						return '昨天'
					}
					return time.substr(8, 2) + '/<span>' + (+time.substr(5, 2)) + '月</span>';
				},
				delMoment: function(studyMomentId) {
					var $this = this;
					$this.items.some(function(item, index) {
						if (item.studyMomentId === studyMomentId) {
							$this.items.splice(index, 1);
							return true;
						}
					});
				}
			}
		});
	</script>
</body>

</html>
